<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
  <div class="apply">
    <div class="wrapper">
      <!-- 项目标题 -->
      <div class="title">{{ data.name }}</div>
      <!-- 项目费用 -->
      <div class="time">
        <span class="left">项目费用：元</span>
      </div>
      <!-- 起止时间 -->
      <div class="time">
        <span class="left">起止时间：</span>
        {{ fmtDate(data.beginTime) }}~{{ fmtDate(data.endTime) }}
      </div>
      <!-- 项目介绍 -->
      <div class="time">
        <span class="left">项目介绍：</span>
        {{ data.introduce }}
      </div>
      <!-- 项目进度 -->
      <div class="progress">
        <el-steps :active="1" align-center>
          <el-step
            title="申请报名"
            description="用户选择自己喜欢的项目进行报名"
          ></el-step>
          <el-step
            title="管理员确认"
            description="管理员确认用户报名，为用户开放账号"
          ></el-step>
          <el-step
            title="用户付款"
            description="用户登录后可以进行确认，完成付款"
          ></el-step>
          <el-step
            title="报名完成"
            description="报名接受后等待管理员线下通知"
          ></el-step>
        </el-steps>
      </div>
      <!-- 报名表单 -->
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <!-- 姓名 -->
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="ruleForm.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 出生日期 -->
          <el-form-item label="出生日期" prop="birth">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.birth"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <!-- 地址 -->
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确认报名</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 报名信息 -->
      <div class="applyQuery" @click="toApplyQuery()">
        已报名？查看报名进度==>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "../utils/request";
import { fmtDate } from "../filters/index";
import  moment  from "moment";
export default {
  data() {
    return {
      // 获取点击报名按钮传输的 id
      id: this.$route.query.id,
      data: {},
      // 表单验证
      ruleForm: {
        name: "",
        telephone: "",
        gender: "",
        birth: "",
        address: "",
      },
      rules: {
        name: [{ required: true, message: "请输入您的姓名", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入您的手机号", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 时间戳转换方法
    fmtDate,
    // 查看报名进度，跳转
    toApplyQuery() {
      this.$router.push({
        path: "./applyQuery",
      });
    },
    // 提交表单方法
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 创建对象属性，将项目id赋值进表单
          this.ruleForm.projectId = this.id;
          // 将出生日期转换为字符串格式
          this.ruleForm.birth = moment(this.ruleForm.birth).format("x");
          post("/index/apply/saveOrUpdate", this.ruleForm).then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: res.message,
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 通过id去过去研学项目的数据
    findProjectById() {
      get("/index/project/findById?id=" + this.id).then((res) => {
        if (res.status == 200) {
          this.data = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
  },
  created() {
    this.findProjectById(this.id);
  },
};
</script>

<style lang="scss" scoped>
.apply {
  .wrapper {
    width: 980px;
    .title {
      font-size: 20px;
      line-height: 3em;
      text-align: center;
      color: #333;
      font-weight: 700;
    }
    .time {
      line-height: 2em;
      .left {
        font-weight: bold;
      }
    }
    .progress {
      padding: 2em;
    }
    .form {
      margin: 0 auto;
      width: 500px;
    }
    .applyQuery {
      color: rgb(93, 93, 207);
      cursor: pointer;
    }
    .applyQuery:hover {
      font-weight: bold;
    }
  }
}
</style>